<template>
  <div>
    <el-button
      type="primary"
      @click="addVehicle"
      v-if="title != '配件详情'"
      >新增</el-button>
    <div style="height: 350px">
      <el-table
        ref="tblMain"
        style="margin-top: 10px"
        :data="listData"
        height="100%"
        v-loading.body="loading"
        border
        stripe
      >
        <el-table-column
          type="index"
          width="50"
          label="序号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="letterName"
          label="品牌名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="brandName"
          label="车系名称"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="vehicleModel"
          label="车型名称"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="60px" >
          <template slot-scope="scope">
            <el-button type="text" @click="removeRowEvent(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <j-select-vehicle-model ref="selVehicle"
      v-if="visible"
      @ok="saveData"
      @cancle="cancle"
      ></j-select-vehicle-model>
  </div>
</template>
<script>
import {
  getCarLetterList,
  getCarBrandList,
  getCarList,
} from '@/api/carLine'
import JSelectVehicleModel from './JSelectVehicleModel.vue'
export default {
  name: 'applyMain',
  props:{
    title:{
      type: String,
      default: ""
    }
  },
  components:{
    JSelectVehicleModel
  },
  data() {
    return {
      visible:false,
      loading: false,
      listData: [],
      letterList: [],
      brandList: [],
      brandAllList:[],
      vmhList:[],
      vmhAllList:[],
      saveType: 'update'
    }
  },
  created() {
  },
  mounted() {
    this.getCarLetterList();
  },
  methods: {
     /**
     * 设置初始化值
     */
    initTableData(val){
      this.listData = val;
    },
    /**
     * 获取当前表格的数据
     */
    getTableData(){
      let list = this.listData
      return list;
    },
    /**
     * 获取码值
     */
    formatterFiled(cellValue,key,val,list) {
      let item = list.find((item) => item[key] === cellValue)
      return item ? item[val] : ''
    },
    addVehicle(){
      this.visible = true
    },
    cancle(){
      this.visible = false
    },
    saveData(list){
      let ids = [];
      ids = this.listData.length > 0 && this.listData.map(item=>{
        return item.id
      })
      console.log(list);
      list.length > 0 && list.map(item=>{
        if(ids.length > 0){
          if( ids.indexOf(item.id) == -1){
            this.listData.push(item)
          }
        }else{
          this.listData.push(item)
        }
      })
    },
    removeRowEvent (row) {
      this.listData.forEach((item,index) => {
          if(item.id == row.id){
            this.listData.splice(index,1)
          }
      })
    },
    /**
     * 获取所有品牌
     */
    getCarLetterList(){
      let data = {
        page: 1,
        size: 1000
      }
      getCarLetterList(data).then((res) => {
        const { code = undefined, data = {} } = res.data
        if (!code) {
         this.letterList = data.content;
        } else {
          this.$message.error(data)
        }
      })
    },
     /**
     * 通过品牌id获取车系
     */
    getCarBrandList(val,row){
      if(row && row.brandId && val != -1 ){
        row.brandId = ""
      }
      let data = {
        page: 1,
        size: val == -1 ?10000:1000,
        letterId: val == -1 ?'':val
      }
      getCarBrandList(data).then((res) => {
        const { code = undefined, data = {} } = res.data
        if (!code) {
         this.brandList = data.content;
         if(val == -1){
           this.brandAllList = data.content;
         }
        } else {
          this.$message.error(data)
        }
      })
    },
      /**
     * 通过车系id获取车型
     */
    getCarList(val,row){
      if(row && row.id && val != -1 ){
        row.id = ""
      }
      let data = {
        page: 1,
        size: val == -1 ? 10000:1000,
        brandId: val == -1 ?'':val
      }
      getCarList(data).then((res) => {
        const { code = undefined, data = {} } = res.data
        if (!code) {
         this.vmhList = data.content;
         if(val == -1){
          this.vmhAllList = data.content;
         }
        } else {
          this.$message.error(data)
        }
      })
    },
  }
}
</script>
